<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>文章管理</span>
        <el-button class="button" type="primary" @click="btnAddDialog">
          添加</el-button
        >
      </div>
    </template>
    <!-- 查询 -->
    <el-form :inline="true" :model="frmQuery" class="demo-form-inline">
      <el-form-item label="标题">
        <el-input
          v-model="frmQuery.a_title"
          placeholder="请输入文章标题"
          clearable
        />
      </el-form-item>
      <el-form-item label="类别">
        <el-select v-model="frmQuery.as_uid" placeholder="选择类别">
          <el-option label="---请选择类别---" value="0"></el-option>
          <el-option
            v-for="cls in classData"
            :key="cls.as_uid"
            :label="cls.as_class"
            :value="cls.as_uid"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="btnQuery">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="a_title" label="标题" width="120" />
      <el-table-column prop="as_class" label="文章类别" width="120" />

      <el-table-column prop="a_picture" label="封面图" width="120">
        <template #default="scope">
          <el-image
      style="width: 70px; height: 70px"
      :src="'http://localhost:8080/images/upload/'+scope.row.a_pictures"     
    />
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间" width="200" />
      <el-table-column prop="update_time" label="修改时间" width="200" />
      <el-table-column fixed="right" label="操作" width="">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="detailDialog(scope.row.a_uid)"
            >阅读文章</el-button
          >
          <el-button
            link
            type="primary"
            size="small"
            @click="updateDialog(scope.row.a_uid)"
            >编辑</el-button
          >
          <el-popconfirm
            confirm-button-text="是"
            cancel-button-text="否"
            :icon="InfoFilled"
            icon-color="#626AEF"
            title="Are you sure to delete this?"
            @confirm="deleteClick(scope.row.a_uid)"
          >
            <template #reference>
              <el-button link type="warning" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <br />
    <!-- 分页 -->
    <el-pagination
      :currentPage="currentPage"
      :page-size="pageSize"
      :page-sizes="[5, 10, 20, 30, 40]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
  <!-- 详情对话框 -->
  <el-dialog v-model="detailDialogVisible" title="查看文章内容" width="60%">
    <el-descriptions :column="4" border title="User Info">
      <el-descriptions-item label="文章名">{{
        article.a_uid
      }}</el-descriptions-item>
      <el-descriptions-item label="文章内容">{{
        article.a_context
      }}</el-descriptions-item>
    </el-descriptions>
  </el-dialog>
  <!-- 添加对话框 -->
  <el-dialog
    v-model="dialogFormVisible"
    title="添加文章"
    :width="dialogWidth"
    :height="dialogHeight"
  >
  <el-form :model="form">
    <el-row :gutter="20">
      <el-col :span="16"
        ><div class="grid-content ep-bg-purple" />
      
          <el-form-item label="标题" :label-width="formLabelWidth">
            <el-input v-model="form.a_title" autocomplete="off" />
          </el-form-item>
          <el-form-item label="文章类别" :label-width="formLabelWidth">
            <el-select v-model="form.as_uid" placeholder="选择类别">
              <el-option
                v-for="cls in classData"
                :key="cls.as_uid"
                :label="cls.as_class"
                :value="cls.as_uid"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="文章内容" :label-width="formLabelWidth">
            <div style="border: 1px solid #ccc">
              <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editorRef"
                :defaultConfig="toolbarConfig"
                :mode="mode"
              />
              <Editor
                style="height: 300px; overflow-y: hidden"
                v-model="valueHtml"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="handleCreated"
              />
            </div>
          </el-form-item>
           
      </el-col>
      <el-col :span="8"
        ><div class="grid-content ep-bg-purple" />
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8080/articles/upload"
          :show-file-list="false"
          :on-success="handleSuccess"
        >
          <img v-if="form.a_pictures" :src="'http://localhost:8080/images/upload/'+form.a_pictures" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-col>
    </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addarticles"> 添加 </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 修改对话框 -->
  <el-dialog v-model="updateDialogVisible" title="修改文章内容" :width="dialogWidth"
    :height="dialogHeight">
    <el-form :model="form">
    <el-row :gutter="20">
      <el-col :span="16"
        ><div class="grid-content ep-bg-purple" />
      
          <el-form-item label="标题" :label-width="formLabelWidth">
            <el-input v-model="form.a_title" autocomplete="off" />
          </el-form-item>
          <el-form-item label="文章类别" :label-width="formLabelWidth">
            <el-select v-model="form.as_uid" placeholder="选择类别">
              <el-option
                v-for="cls in classData"
                :key="cls.as_uid"
                :label="cls.as_class"
                :value="cls.as_uid"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="文章内容" :label-width="formLabelWidth">
            <div style="border: 1px solid #ccc">
              <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editorRef"
                :defaultConfig="toolbarConfig"
                :mode="mode"
              />
              <Editor
                style="height: 300px; overflow-y: hidden"
                v-model="this.form.a_context "
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="handleCreated"
              />
            </div>
          </el-form-item>
           
      </el-col>
      <el-col :span="8"
        ><div class="grid-content ep-bg-purple" />
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8080/articles/upload"
          :show-file-list="false"
          :on-success="handleSuccess"
        >
          <img v-if="form.a_pictures" :src="'http://localhost:8080/images/upload/'+form.a_pictures" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-col>
    </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="updatearticles"> 修改 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

import { ElMessage } from "element-plus";

import { Plus } from "@element-plus/icons-vue"; //图片上传plus

export default {
  components: { Editor, Toolbar, Plus },

  data() {
    return {
      editorRef: shallowRef(),
      valueHtml: "<p>文章内容</p>",
      toolbarConfig: {},
      editorConfig: { placeholder: "请输入内容..." },
      mode: "default", // 或 'simple'
      currentPage: 1,
      pageSize: 5,
      pageInfo: {},
      frmQuery: {
        as_uid: "0",
        a_title: "",
      }, //
      formLabelWidth: "140px",
      form: {},
      dialogFormVisible: false, //添加对话框
      detailDialogVisible: false, //详情对话框
      updateDialogVisible: false, //修改对话框
      tableData: [],
      classData: [],
      articles: {},
      dialogWidth: "1000px", //对话框的宽度
      dialogHeight: "500px", //对话框的高度
      imageUrl: "",
    };
  }, //
  mounted() {
    this.LoadData();
    this.LoadClassData();
    this.getData(1, 5); //分页
  },
  methods: {
    handleSuccess(response) {
      console.log(response);
      //this.imageUrl ="http://localhost:8080/images/upload/"+ response; //图片上传成功的回流函数
      this.form.a_pictures =  response;
    },
    handleCreated(editor) {
      this.editorRef = editor; // 记录 editor 实例，重要！
    },
    //组件销毁时，即使销毁编辑器
    onBeforeUnmount() {
      const editor = this.editorRef;
      if (editor == null) return;
      editor.destroy();
    },
    // 分页
    getData(num, size) {
      this.$http
        .get("http://localhost:8080/articles/page", {
          params: {
            pageNum: num,
            pageSize: size,
          },
        })
        .then((response) => {
          this.pageInfo = response.data;
          this.tableData = this.pageInfo.list;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getData(this.currentPage, this.pageSize);
      console.log("size", pageSize);
    },
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum;
      this.LoadData()
      console.log("num", pageNum);
    },
    btnQuery() {
      this.currentPage=1
      this.LoadData();
      console.log(this.frmQuery);
    },
    LoadClassData() {
      this.$http
        .get("http://localhost:8080/articles_cls/list")
        .then((res) => {
          this.classData = res.data;
          console.log(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    LoadData() {
      
      this.$http
        .get(
          "http://localhost:8080/articles/list?as_uid=" +this.frmQuery.as_uid +
            "&a_title=" +this.frmQuery.a_title+ "&pageNum=" + this.currentPage+ "&pageSize=" +this.pageSize
        )
        .then((res) => {
          this.pageInfo = res.data
          this.tableData = this.pageInfo.list;
          console.log(res.data);
        })
        .catch((err) => {
          console.log(err);
        }); // 加载文章信息 res中有我们请求响应的数据
    },
    updatearticles() {
      console.log(this.form);
      this.$http
        .post("http://localhost:8080/articles/update", this.form)
        .then((res) => {
          console.log(res.data);
          if (res.data == 1) {
            console.log("修改成功！");
            this.form = {}; // 清空表单对象
            this.updateDialogVisible = false; // 关闭修改对话框
            this.LoadData(); // 重新加载数据
            ElMessage({
              message: "修改成功！",
              type: "success",
            });
          } else {
            console.log("修改失败！");
            ElMessage({
              message: "修改失败！",
              type: "warning",
            });
          }
        })
        .catch((err) => {});
    },
    addarticles() {
      this.form.a_context = this.valueHtml;
      console.log(this.form);
      this.$http
        .post("http://localhost:8080/articles/add", this.form)
        .then((res) => {
          console.log(res.data);
          if (res.data == 1) {
            console.log("添加成功！");
            this.form = {};
            this.dialogFormVisible = false;
            this.LoadData();
            ElMessage({
              message: "添加成功！",
              type: "success",
            });
          } else {
            console.log("添加失败！");
            ElMessage({
              message: "添加失败！",
              type: "warning",
            });
          }
        })
        .catch((err) => {});
    },
    btnAddDialog() {
      this.dialogFormVisible = true;
    },
    deleteClick(a_uid) {
      // 删除操作
      console.log(a_uid);
      this.$http
        .get("http://localhost:8080/articles/delete/" + a_uid)
        .then((res) => {
          console.log(res.data);
          if (res.data == 1) {
            console.log("删除成功！");
            this.LoadData();
            ElMessage({
              message: "删除成功！",
              type: "success",
            });
          } else {
            console.log("删除失败！");
            ElMessage({
              message: "删除失败！",
              type: "warning",
            });
          }
        })
        .catch((err) => {});
    },
    updateDialog(a_uid) {
      this.valueHtml = this.form.a_context; // 编辑操作
      console.log(a_uid);
      this.$http
        .get("http://localhost:8080/articles/get/" + a_uid)
        .then((res) => {
          console.log(res.data);
          this.form= res.data[0];
        })
        .catch((err) => {});
      this.updateDialogVisible = true;
    },
  },
};
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 100%;
}
</style>
<!--这些是对话框右边图片上传的样式-->
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>